<template>
  <div class="m-collapse">
    <el-collapse v-model="collapseActive">
      <el-collapse-item name="1">
        <template slot="title">
          资金<i class="el-icon-refresh refreshBtn" @click.stop="queryList('A')"></i>
        </template>
        <div class="m-dataList">
          <el-table
            :data="dataListA"
            ref="dataListA"
            v-loading="dataListLoadingA"
            element-loading-text="loading..."
            max-height="300"
            style="width: 100%"
          >
            <el-table-column
              prop="account_no"
              width="200"
              label="交易账号">
            </el-table-column>
            <el-table-column
              prop="account_status"
              label="账号状态"
              width="120">
              <template slot-scope="scope">
                {{scope.row.account_status | accountStatus}}
              </template>
            </el-table-column>
            <el-table-column
              prop="account_level"
              label="账号级别"
              width="80">
              <template slot-scope="scope">
                {{scope.row.account_level | accountLevel}}
              </template>
            </el-table-column>
            <el-table-column
              prop="platform"
              label="交易平台"
              width="80">
            </el-table-column>
            <el-table-column
              prop="account_currency"
              label="账号货币"
              width="80">
            </el-table-column>
            <el-table-column
              prop="balance"
              label="结余"
              align="right"
              :formatter="countDateMoneyFormat"
              min-width="150">
            </el-table-column>
            <el-table-column
              prop="margin"
              label="占用保证金"
              align="right"
              :formatter="countDateMoneyFormat"
              min-width="150">
            </el-table-column>
            <el-table-column
              prop="free_margin"
              label="可用保证金"
              align="right"
              :formatter="countDateMoneyFormat"
              min-width="150">
            </el-table-column>
            <el-table-column
              prop="equity"
              label="净值"
              align="right"
              :formatter="countDateMoneyFormat"
              width="150">
            </el-table-column>
          </el-table>
        </div>
      </el-collapse-item>
      <el-collapse-item name="2">
        <template slot="title">持仓（{{dataListB.length}}）</template>
        <div class="m-searchPanel m-searchPanelA">
          <div class="layout-2">
            <el-form :model="searchFormB" class="demo-form-inline" :inline="true">
              <el-row :gutter="30">
                <el-col :span="6">
                  <el-form-item label="交易平台">
                    <el-select v-model="searchFormB.platform" placeholder="请选择" clearable>
                      <el-option label="GTS2" value="GTS2"></el-option>
                      <el-option label="MT4" value="MT4"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item class="input-with-select">
                    <el-input placeholder=" " v-model.trim="searchFormB.inputFH" clearable>
                      <el-select v-model="searchFormB.typeinputFH" slot="prepend" placeholder="请选择"
                                 class="selectInputType">
                        <el-option label="订单号" value="orderId"></el-option>
                        <el-option label="成交单号" value="dealId"></el-option>
                        <el-option label="持仓单号" value="positionId"></el-option>
                      </el-select>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6" :offset="6" class="searchBtns">
                  <el-button type="primary" icon="el-icon-search" @click="search('B')" :loading="dataListLoadingB">
                    查询
                  </el-button>
                  <el-button type="primary" plain icon="el-icon-refresh" @click="resetB">重置</el-button>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </div>
        <div class="m-dataList">
          <el-table
            :data="dataListB"
            max-height="300"
            @sort-change="(data)=>{tableSortBy('B',data)}"
            v-loading="dataListLoadingB"
            element-loading-text="loading..."
            ref="dataListB"
            style="width: 100%"
          >
            <el-table-column
              prop="account_no"
              label="交易账号">
            </el-table-column>
            <el-table-column
              prop="platform"
              label="交易平台"
              width="80">
            </el-table-column>
            <el-table-column
              prop="order_p_id"
              label="订单号"
              width="120">
            </el-table-column>
            <el-table-column
              prop="deal_p_id"
              label="成交单号"
              width="120">
            </el-table-column>
            <el-table-column
              prop="position_p_id"
              label="持仓单号"
              width="150">
            </el-table-column>
            <el-table-column
              prop="symbol"
              label="产品"
              sortable="custom"
              min-width="150">
            </el-table-column>
            <el-table-column
              prop="direction"
              label="买/卖"
              width="80">
            </el-table-column>
            <el-table-column
              prop="open_price"
              label="开仓价格"
              align="right"
              :formatter="countDateMoneyFormat"
              width="100">
            </el-table-column>
            <el-table-column
              prop="volume"
              label="手数"
              sortable="custom"
              width="100">
            </el-table-column>
            <el-table-column
              prop="trade_time"
              sortable="custom"
              :formatter="countTimeFormat"
              label="成交时间"
              width="160">
            </el-table-column>
          </el-table>
        </div>
      </el-collapse-item>
      <el-collapse-item name="3">
        <template slot="title">委托单（{{dataListC.length}}）</template>
        <div class="m-searchPanel m-searchPanelA">
          <div class="layout-2">
            <el-form :model="searchFormC" :inline="true">
              <el-row :gutter="30">
                <el-col :span="6">
                  <el-form-item label="交易平台">
                    <el-select v-model="searchFormC.platform" placeholder="请选择" clearable>
                      <el-option label="GTS2" value="GTS2"></el-option>
                      <el-option label="MT4" value="MT4"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="订单号">
                    <el-input placeholder=" " v-model.trim="searchFormC.orderId" clearable></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6" :offset="6" class="searchBtns">
                  <el-button type="primary" icon="el-icon-search" @click="search('C')" :loading="dataListLoadingC">
                    查询
                  </el-button>
                  <el-button type="primary" plain icon="el-icon-refresh" @click="resetC">重置</el-button>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </div>
        <div class="m-dataList">
          <el-table
            :data="dataListC"
            v-loading="dataListLoadingC"
            @sort-change="(data)=>{tableSortBy('C',data)}"
            element-loading-text="loading..."
            style="width: 100%"
            ref="dataListC"
            max-height="300"
          >
            <el-table-column
              prop="account_no"
              width="120"
              label="交易账号">
            </el-table-column>
            <el-table-column
              prop="platform"
              label="交易平台"
              width="80">
            </el-table-column>
            <el-table-column
              prop="order_p_id"
              label="订单号"
              width="120">
            </el-table-column>
            <el-table-column
              prop="symbol"
              label="产品"
              sortable="custom"
              min-width="150">
            </el-table-column>
            <el-table-column
              prop="report_type"
              label="开/平"
              width="80">
            </el-table-column>
            <el-table-column
              prop="order_type"
              label="类型"
              width="80">
              <template slot-scope="scope">
                {{scope.row.order_type | orderType}}
              </template>
            </el-table-column>
            <el-table-column
              prop="address"
              label="买/卖"
              width="80">
              <template slot-scope="scope">
                <span>{{scope.row.report_type == 'OPEN' ? scope.row.open_direction : scope.row.close_direction}}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="order_request_price"
              label="价格"
              align="right"
              :formatter="countDateMoneyFormat"
              width="100">
            </el-table-column>
            <el-table-column
              prop="order_request_volume"
              label="手数"
              sortable="custom"
              width="100">
            </el-table-column>
            <el-table-column
              prop="order_takeprofit"
              label="止盈"
              align="right"
              :formatter="countDateMoneyFormat"
              width="100">
            </el-table-column>
            <el-table-column
              prop="order_stoploss"
              label="止损"
              align="right"
              :formatter="countDateMoneyFormat"
              width="100">
            </el-table-column>
            <el-table-column
              prop="order_request_time"
              sortable="custom"
              :formatter="countTimeFormat"
              label="下单时间"
              width="160">
            </el-table-column>
            <el-table-column
              prop="order_expire_type"
              label="有效日期"
              width="160">
              <template slot-scope="scope">
                {{scope.row.order_expire_type | orderExpireType}}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
  import * as RealaccountAPI from '@/Api/realaccount'
  import * as Utils from '@/utils'
  export default {
    name: 'TheAccountDetailsAccount',
    data () {
      return {
        collapseActive: ['1', '2', '3'],
        dataListA: [],
        dataListLoadingA: false,
        searchFormA: {},
        sortInfoA:{},
        ajaxSearchParamsA:{},

        dataListB: [],
        dataListLoadingB: false,
        searchFormB: {
          platform: '',
          inputFH: '',
          typeinputFH: 'orderId',
        },
        sortInfoB:{},
        ajaxSearchParamsB:{},

        dataListC: [],
        dataListLoadingC: false,
        searchFormC: {
          platform: '',
          orderId: '',
        },
        sortInfoC:{},
        ajaxSearchParamsC:{},
      }
    },
    filters: {
      accountStatus(val){
        let _list = {
          'A': '活跃',
          'C': '限制开仓',
          'D': '注销',
          'N': '未激活',
          'S': '未激活-禁用',
          'T': '测试',
        }
        if (_list.hasOwnProperty(val)) {
          return _list[val];
        } else {
          return val
        }
      },
      orderExpireType(val){
        if (val == '1') {
          return '当日有效'
        } else if (val == '2') {
          return '当周有效'
        } else if (val == '3') {
          return '指定时间'
        }
        else {
          return val;
        }
      },
      accountLevel(val){
        let _list = {
          aMIN: '标准',
          aVIP: '标准',
          aSTD: '标准',
          aOTHER: '标准',
          MIN: '迷你',
          mMIN1: '迷你',
          mSTD1: '标准',
          mTES1: '测试',
          mVIP1: '高端',
          mVIP2: '高端',
          sSTD1: '标准',
          STD: '标准',
          sVIP1: '高端',
          VIP: '高端'
        }
        if (_list.hasOwnProperty(val)) {
          return _list[val];
        } else {
          return val
        }
      },
      orderType(val){
        if (val == '1') {
          return '市价'
        }
        else if (val == '2') {
          return '限价'
        }
        else if (val == '4') {
          return '停损'
        }
        else if (val == '8') {
          return '市价'
        }
        else if (val == '16') {
          return '止损'
        }
        else if (val == '32') {
          return '止盈'
        }
        else if (val == '64') {
          return '市价'
        }
        else if (val == '81') {
          return '市价'
        }
        else if (val == '128') {
          return '市价'
        }
        else if (val == '160') {
          return '市价'
        }
        else if (val == '161') {
          return '市价'
        }
        else {
          return val
        }
      }
    },
    computed: {
      queryId(){
        return this.$route.params.id.split('_')[1]
      }
    },
    methods: {
      resetB(){
        this.searchFormB = {
          platform: '',
          inputFH: '',
          typeinputFH: 'orderId',
        }
      },
      resetC(){
        this.searchFormC = {
          platform: '',
          orderId: '',
        }
      },
      search(type){
        this['ajaxSearchParams'+type] = Utils.searchParamsFormat(this['searchForm' + type])
        this.queryList(type);
      },
      tableSortBy(type,data) {
        if (!data.order) {
          return;
        }
        this['sortInfo'+type].orderParam = data.prop;
        this['sortInfo'+type].orderType = data.order.substr(0, data.order.length - 6);
        this.queryList(type);
      },
      queryList(type){
        let params = {};
        if (['A', 'B', 'C'].indexOf(type) < 0) {
          console.log('type参数有误');
          return;
        }
        this['dataListLoading' + type] = true;
        if (this.$refs['dataList' + type]) {
          this.$refs['dataList' + type].bodyWrapper.scrollTop = 0;
        }
        params = Object.assign({
          queryId: this.queryId,
        }, this['ajaxSearchParams' + type],this['sortInfo'+type])
        RealaccountAPI['realaccountInfo2_1_' + type](params)
          .then(res => {
            this['dataListLoading' + type] = false;
            if (res.code != '0') {
              this.$notify({
                type: 'warning',
                title: '温馨提示',
                message: res.msg,
              })
              return;
            }
            this['dataList' + type] = res.data;
          })
          .catch(error => {
            this['dataListLoading' + type] = false;
            console.log(error);
          })
      },
      countTimeFormat(row, column){
        return Utils.countDateTimeFormat(row[column.property])
      },
      countDateMoneyFormat(row, column){
        return Utils.countDateMoneyFormat(row[column.property])
      },
    },
    created(){
      this.search('A');
      this.search('B');
      this.search('C');
    }
  }
</script>

<style scoped lang="scss">
  .refreshBtn {
    float: right;
    font-size: 20px;
    margin-right: 20px;
    color:#909399;
    margin-top: 12px;
  }
</style>
